<template>
  <div class="content" :style="contentStyle">
    <v-touch
      class="article"
      :class="{suc:item.isFinish}"
      v-for="(articleItem,index) in item.articles"
      :key="index"
      :style="articleStyle(articleItem)"
      @tap="articleItem.isTouch?null:articleTouch(articleItem,$event)"
    ></v-touch>
    <Audio
      v-if="!item.isFinish"
      @audioStart="audioStart"
      @audioWithSuc="audioWithSuc"
      @audioWithFail="audioWithFail"
      :withText="item.articles.length"
      ref="audio"
    />
    <audio preload="auto" ref="ttsAudio" :src="ttsAudioSrc"></audio>
  </div>
</template>

<script>
import Audio from "../audio.vue"
import { mixins } from "@/common/mixins/assignmentMixins.js"
import {mapActions} from "vuex";
export default {
  components: { Audio },
  mixins: [mixins],
  data() {
    return {
      articleCount: 0,
      ttsWord: ""
    }
  },
  created() {
    this.articleCount = this.item.articles.filter(item => { return item.isTouch }).length
  },
  computed: {
    ttsAudioSrc() {
      return "https://tts.baidu.com/text2audio?idx=1&tex=" + this.ttsWord + "&cuid=baidu_speech_demo&cod=2&lan=zh&ctp=1&pdt=1&spd=2&vol=5&pit=6&per=4"
    },
    //元素属性
    articleStyle(item) {
      return function (item) {
        return {
          position: "absolute",
          background: "url(" + item.imageUrl + ")0 0/100% 100%",
          width: item.width,
          height: item.height,
          left: item.left,
          top: item.top,
          filter: item.isTouch ? "grayscale(0)" : "grayscale(1)"
        }
      }
    }
  },
  methods: {
    articleTouch: function (articleItem, event) {
      this.articleCount++
      this.ttsWord = this.articleCount + this.item.articleType
      this.updateOperated({questionIndex:this.questionIndex,param:this.index})
      this.sucMusic()
      setTimeout(() => { this.$refs.ttsAudio.play() }, 0)
      this.$set(articleItem, "isTouch", true)
    },
    audioStart: function () {
      this.updateOperated({questionIndex:this.questionIndex,param:this.index})
    },
    audioWithSuc: function () {
      this.sucMusic()
      if(this.isSeedEntery){
            this.setSucLottiePlay()
        setTimeout(()=>{this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})},3000)
          }else {
            this.perfectMusic()
        this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})
          }

      this.addAnswer({
        id: this.item.id,
        type: true
      })
    },
    audioWithFail: function () {
      this.retryMusic()
      if(this.isSeedEntery){
            setTimeout(()=>{this.$emit('nextAssignment')},600)
      } else {
              this.$emit("losShow")
          }
      this.addAnswer({
        id: this.item.id,
        type: false
      })
    },
    ...mapActions("mainStatus", ["setLoading"])
  },
  watch: {
    activeIndex: function (activeIndex) {
      if (this.index === activeIndex) {
        this.$refs.audio.audioAnimate()
      }
    }
  }
}
</script>

<style scoped lang='stylus'>
@import '../../../common/stylus/content.styl'
</style>
